<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen flex">
    <!-- 左侧品牌展示区 -->
    <div class="w-1/2 relative overflow-hidden">
      <div class="absolute inset-0">
        <img
          class="w-full h-full object-cover"
          src="https://ai-public.mastergo.com/ai/img_res/301947d3399fa64ca9089224aa2c581f.jpg"
          alt="背景"
        />
      </div>
      <div class="relative z-10 flex flex-col items-center justify-center h-full text-white px-12">
        <img
          class="w-24 h-24 mb-8"
          src="https://ai-public.mastergo.com/ai/img_res/ee4c7aa9fc59bf45e22abb6c3e46e05d.jpg"
          alt="Logo"
        />
        <h1 class="text-4xl font-bold mb-4">AutoTest Platform</h1>
        <p class="text-xl mb-12">智能化测试，让质量看得见</p>

        <div class="w-full max-w-md">
          <Swiper
            :modules="swiperModules"
            :slides-per-view="1"
            :autoplay="{ delay: 3000 }"
            :pagination="{ clickable: true }"
            class="w-full"
          >
            <SwiperSlide v-for="(feature, index) in features" :key="index">
              <div class="text-center p-6">
                <h3 class="text-xl font-semibold mb-2">{{ feature.title }}</h3>
                <p class="text-gray-200">{{ feature.desc }}</p>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </div>
    </div>

    <!-- 右侧登录/注册区 -->
    <div class="w-1/2 bg-white flex items-center justify-center p-12">
      <div class="w-full max-w-md">
        <div class="flex justify-center mb-8">
          <a-radio-group v-model:value="activeTab" class="bg-gray-100 p-1 rounded-lg">
            <a-radio-button value="login" class="!rounded-button">登录</a-radio-button>
            <a-radio-button value="register" class="!rounded-button">注册</a-radio-button>
          </a-radio-group>
        </div>

        <!-- 登录表单 -->
        <div v-if="activeTab === 'login'" class="space-y-6">
          <h2 class="text-2xl font-bold text-center mb-8">欢迎回来</h2>
          <a-form :model="loginForm" @finish="handleLogin">
            <a-form-item>
              <a-input v-model:value="loginForm.username" size="large" placeholder="用户名/邮箱">
                <template #prefix>
                  <UserOutlined />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input-password v-model:value="loginForm.password" size="large" placeholder="密码">
                <template #prefix>
                  <LockOutlined />
                </template>
              </a-input-password>
            </a-form-item>
            <div class="flex justify-between items-center mb-6">
              <a-checkbox v-model:checked="loginForm.remember">记住密码</a-checkbox>
              <a class="text-blue-600 hover:text-blue-700">忘记密码？</a>
            </div>
            <a-button
              type="primary"
              html-type="submit"
              class="w-full h-12 !rounded-button"
              size="large"
            >
              登录
            </a-button>
          </a-form>

          <div class="mt-8">
            <div class="flex items-center justify-center space-x-4">
              <div class="flex-1 h-px bg-gray-200"></div>
              <span class="text-gray-500">其他登录方式</span>
              <div class="flex-1 h-px bg-gray-200"></div>
            </div>
            <div class="flex justify-center space-x-6 mt-4">
              <a-button class="!rounded-button" shape="circle" size="large">
                <template #icon><GithubOutlined /></template>
              </a-button>
              <a-button class="!rounded-button" shape="circle" size="large">
                <template #icon><GoogleOutlined /></template>
              </a-button>
            </div>
          </div>
        </div>

        <!-- 注册表单 -->
        <div v-else class="space-y-6">
          <h2 class="text-2xl font-bold text-center mb-8">创建新账号</h2>
          <a-form :model="registerForm" @finish="handleRegister">
            <a-form-item>
              <a-input v-model:value="registerForm.email" size="large" placeholder="邮箱地址">
                <template #prefix>
                  <MailOutlined />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input v-model:value="registerForm.username" size="large" placeholder="用户名">
                <template #prefix>
                  <UserOutlined />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input-password
                v-model:value="registerForm.password"
                size="large"
                placeholder="密码"
              >
                <template #prefix>
                  <LockOutlined />
                </template>
              </a-input-password>
            </a-form-item>
            <a-form-item>
              <a-input-password
                v-model:value="registerForm.confirmPassword"
                size="large"
                placeholder="确认密码"
              >
                <template #prefix>
                  <LockOutlined />
                </template>
              </a-input-password>
            </a-form-item>
            <div class="flex space-x-4 mb-6">
              <a-input
                v-model:value="registerForm.captcha"
                size="large"
                placeholder="验证码"
                class="flex-1"
              />
              <a-button class="!rounded-button whitespace-nowrap" size="large">获取验证码</a-button>
            </div>
            <a-checkbox v-model:checked="registerForm.agreement" class="mb-6">
              我已阅读并同意
              <a class="text-blue-600 hover:text-blue-700">用户协议</a>
              和
              <a class="text-blue-600 hover:text-blue-700">隐私政策</a>
            </a-checkbox>
            <a-button
              type="primary"
              html-type="submit"
              class="w-full h-12 !rounded-button"
              size="large"
            >
              注册
            </a-button>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Pagination, Autoplay } from 'swiper/modules'
import {
  UserOutlined,
  LockOutlined,
  MailOutlined,
  GithubOutlined,
  GoogleOutlined,
} from '@ant-design/icons-vue'

const swiperModules = [Pagination, Autoplay]

const activeTab = ref('login')

const features = [
  {
    title: '智能化测试执行',
    desc: '自动化测试用例管理与执行，提升测试效率',
  },
  {
    title: '数据驱动决策',
    desc: '深度分析测试数据，助力质量提升',
  },
  {
    title: '持续集成部署',
    desc: '无缝对接 CI/CD 流程，实现测试自动化',
  },
]

const loginForm = ref({
  username: '',
  password: '',
  remember: false,
})

const registerForm = ref({
  email: '',
  username: '',
  password: '',
  confirmPassword: '',
  captcha: '',
  agreement: false,
})

const handleLogin = () => {
  console.log('login', loginForm.value)
}

const handleRegister = () => {
  console.log('register', registerForm.value)
}
</script>

<style scoped>
/* @import 'tailwindcss'; */
:deep(.ant-radio-button-wrapper) {
  background: transparent;
}

:deep(.ant-radio-button-wrapper-checked) {
  background: white;
  color: #1890ff;
}

:deep(.swiper-pagination-bullet) {
  background: white;
}

:deep(.swiper-pagination-bullet-active) {
  background: #1890ff;
}
</style>
